<!-- 嵌套其他地图 -->
<template>
  <div>
    <!-- 楼栋列表 -->
    <div class="loudong-list">
      <li>楼栋编号</li>
      <button @click="buildingClick('03')">03</button>
      <button @click="buildingClick('07')">07</button>
      <button @click="buildingClick('09')">09</button>
      <button @click="buildingClick('10')">10</button>
    </div>
    <!-- 楼层列表 -->
    <div class="loudong-list">
      <li>楼层</li>
      <button @click="floorClick(1)">1</button>
      <button @click="floorClick(2)">2</button>
      <button @click="floorClick(3)">3</button>
      <button @click="floorClick(4)">4</button>
    </div>
    <!-- 房间列表 -->
    <div class="loudong-list">
      <li>房间</li>
      <button @click="roomClick('186')">186</button>
      <button @click="roomClick('187')">187</button>
      <button @click="roomClick('188')">188</button>
      <button @click="roomClick('190')">190</button>
    </div>
    <div>当前点击房间信息：楼栋编号：{{ roomObj.building_fwbh }} 楼层：{{ roomObj.floor }} 房间编号：{{ roomObj.room_id }} </div>
    <!-- 地图 -->
    <div class="mapstyle">
      <iframe v-if="ifeameShow" ref="ifeameRef" :src="flowSrc" style="height:100%; width:100%;margin:0;border:0;">
      </iframe>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const flowSrc = ref(null)
const ifeameShow = ref(true)
const roomObj = ref({
  building_fwbh: '',
  floor: '',
  room_id: ''
})
const ifeameRef = ref(null)

onMounted(() => {
  console.log('总控件中')
  window.addEventListener('message', function (e) {
    // e即为消息数据
    // 如果e.data.room_id  存在代表选中了这个房间。
    console.log('从子页面获取的房价编号', e.data)
    roomObj.value = e.data.data
  }, false)
})

// 建筑点击事件
function buildingClick(buildingid) {
  ifeameShow.value = false
  roomObj.value.building_fwbh = buildingid
  roomObj.value.floor = '1'
  flowSrc.value = `http://61.52.175.217:21080/hngydxfcdt/#/?building_fwbh=${buildingid}&floor=1`
  setTimeout(() => {
    ifeameShow.value = true
  }, 100)
  // ifeameRef.value.contentWindow.location = `http://61.52.175.217:21080/hngydxfcdt/#/?building_fwbh=${buildingid}&floor=1`

  // ifeameRef.value.contentWindow.location.reload(true)
  // router.go()
}
// 楼层点击事件
function floorClick(floor) {
  roomObj.value.building_fwbh = '09'
  roomObj.value.floor = floor
  ifeameShow.value = false
  flowSrc.value = `http://61.52.175.217:21080/hngydxfcdt/#/?building_fwbh=09&floor=${floor}`
  setTimeout(() => {
    ifeameShow.value = true
  }, 100)
}

// 房间点击事件
function roomClick(roomid) {
  roomObj.value.building_fwbh = '09'
  roomObj.value.floor = '1'
  roomObj.value.room_id = roomid
  ifeameShow.value = false
  flowSrc.value = `http://61.52.175.217:21080/hngydxfcdt/#/?building_fwbh=09&floor=1&room_id=${roomid}`
  setTimeout(() => {
    ifeameShow.value = true
  }, 100)
}

defineExpose({
})

</script>

<style lang='scss' scoped>
.loudong-list {
  li {
    display: inline;
    margin-left: 20px;
  }
  button{
    margin-left: 20px;
  }
}

.mapstyle {
  width: 600px;
  height: 500px;
  // background-color: pink;
  border: 1px solid pink;
}
</style>
